<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>帮助支持</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==1'>帮助支持列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==2'>新增帮助支持</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==3'>修改帮助支持</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==4'>帮助支持详情</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--帮助支持列表-->
        <el-row v-show='showPage==1'>
            <!--按钮+搜索-->
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addHelp'>新增帮助支持</el-button>
                </el-col>
                <el-col :span='3' :offset="1">
                    <el-input size="small" placeholder="请输入问题" style='width:100%' suffix-icon="el-icon-search" :clearable='true' @clear="cleanKey" v-model="table.question" @keyup.enter.native="queryKey"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-select v-model.number="table.helpType" clearable placeholder="类型" size='small' @change='helpTypeChange'>
                        <el-option v-for="item in table.helpTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model.number="table.helpState" clearable placeholder="状态" size='small' @change='helpStateChange'>
                        <el-option v-for="item in table.helpStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <!--表格-->
            <el-row style="margin-top:10px;">
                <el-table :data='table.tableData' border stripe style="width:100%" size="small" :highlight-current-row="true" ref="multipleTable">
                    <el-table-column label="编号" prop="helpId" min-width="100"></el-table-column>
                    <el-table-column label="类型" min-width="150">
                        <template slot-scope="scope">
                            <span v-if="scope.row.helpType==1" style="color:#409EFF">蛮有财</span>
                            <span v-if="scope.row.helpType==2" style="color:#67C23A">0税宝</span>
                            <span v-if="scope.row.helpType==3" style="color:#E6A23C">出口E贷</span>
                            <span v-if="scope.row.helpType==4" style="color:#F56C6C">外贸服务平台</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="问题" prop="question" min-width="250"></el-table-column>
                    <el-table-column label="状态" min-width="150">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if='scope.row.helpState==0'>未发布</el-tag>
                            <el-tag type="success" v-if='scope.row.helpState==1'>已发布</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="orderNum" min-width="100"></el-table-column>
                    <el-table-column label="创建时间" prop='createTime' min-width="150"></el-table-column>
                    <el-table-column label='操作' min-width='200'>
                        <template slot-scope="scope">
                            <el-button type="text" v-if='scope.row.helpState==0' @click="toModify(scope.row)">修改</el-button>
                            <el-button type="text" v-if='scope.row.helpState==0' @click="toDelete(scope.row)">删除</el-button>
                            <el-button type="text" v-if='scope.row.helpState==0' @click="toPublish(scope.row)">发布</el-button>
                            <el-button type="text" v-if='scope.row.helpState==1' @click="toUnPublish(scope.row)">取消发布</el-button>
                            <el-button type="text" @click="toPreview(scope.row)">预览</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页条-->
                 <el-pagination style="margin-top:10px; text-align:right" @current-change="currentChangeHandle" :current-page="table.currentPage"
                :page-size="table.pageSize" layout="total, prev, pager, next, jumper" :total="table.rowCount"></el-pagination>
            </el-row>
        </el-row>

        <!--新增/修改-->
        <el-row v-show='showPage==2||showPage==3'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-form style="margin-top:10px;" label-position='right' label-width='80px' :model='addForm'
            ref='addForm' size='small' :rules='addForm.rules'>
                <el-form-item label="类型" prop="helpType">
                    <el-select v-model.number='addForm.helpType' placeholder="请选择类型" style="width:200px;">
                        <el-option v-for='item in table.helpTypeList'
                        :key='item.value' :label='item.label' :value='item.value'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='问题' prop="question">
                    <el-input style="width:400px;" v-model="addForm.question" placeholder="请输入问题"></el-input>
                </el-form-item>
                <el-form-item label="回答" prop="answer">
                    <el-input type="textarea" v-model="addForm.answer"
                    placeholder="请输入回答"  :rows="6" style="width:400px;"></el-input>
                </el-form-item>
                <el-form-item label="排序号" prop='orderNum'>
                    <el-input-number v-model="addForm.orderNum" :min="1" :max="100" :precision="0" style="width:200px;"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!--查看详情-->
        <el-row v-show='showPage==4'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-form style="margin-top:10px;" label-position='right' label-width='80px' size='small'>
                    <el-form-item label="类型">
                        <span v-if="preForm.helpType==1" style="color:#409EFF">蛮有财</span>
                        <span v-if="preForm.helpType==2" style="color:#67C23A">0税宝</span>
                        <span v-if="preForm.helpType==3" style="color:#E6A23C">出口E贷</span>
                        <span v-if="preForm.helpType==4" style="color:#F56C6C">外贸服务平台</span>
                    </el-form-item>
                    <el-form-item label="排序">
                        <span>{{preForm.orderNum}}</span>
                    </el-form-item>
                    <el-form-item label="问题">
                        <span>{{preForm.question}}</span>
                    </el-form-item>
                    <el-form-item label="回答">
                        <div class='pre' v-text="preForm.answer"></div>
                    </el-form-item>
                    
                </el-form>
            </el-row>
        </el-row>
    </div>
</template>

<script>
export default {
    
    data(){
        return {
            showPage: 1,
            table: {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                rowCount: 0,
                question: '',
                helpType: '',
                helpState: '',
                helpTypeList: [
                    {label:"蛮有财",value:1},
                    {label:"0税宝",value:2},
                    {label:"出口E贷",value:3},
                    {label:"外贸服务平台",value:4},
                ],
                helpStateList: [
                    {label:"未发布",value:0},
                    {label:"已发布",value:1},
                ],
            },
            addForm: {
                isCreate: '',
                helpId: '',
                question: '',
                answer: '',
                helpType: '',
                orderNum: '',
                rules: {
                    question: [
                        {required: true, message: '请填写问题', trigger: 'blur'}
                    ],
                    answer: [
                        {required: true, message: '请填写回答', trigger: 'blur'}
                    ],
                    orderNum: [
                        {required: true, message: '请设置排序号', trigger: 'blur'}
                    ],
                    helpType: [
                        {
                            required: true,
                            message: '请选择类型',
                            trigger: 'blur,change',
                            type: 'number'
                        }
                    ]
                }
            },
            preForm: {
                helpId: '',
                question: '',
                answer: '',
                helpType: '',
                orderNum: '',
                helpState: ''
            },

        }
    },

    methods: {
        getTableData(){
            let p = {};
            let url = '/api/helpSupport/list';
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            p.key = this.table.question;
            p.helpState = this.table.helpState;
            p.helpType = this.table.helpType;
            this.$http.fetch(url, p)
                .then(res => {
                    this.table.tableData = res.data.rows;
                    this.table.rowCount = res.data.total;
                })
        },
        cleanKey(){
            this.table.currentPage = 1;
            this.table.queryKey = '';
            this.getTableData();
        },
        queryKey(){
            this.table.currentPage = 1;
            this.getTableData();
        },

        helpTypeChange(value){
            this.table.helpType = value;
            this.table.currentPage = 1;
            this.getTableData();
        },

        helpStateChange(value){
            this.table.helpState = value;
            this.table.currentPage = 1;
            this.getTableData();
        },

        //翻页
        currentChangeHandle(currentPage) {
            this.table.currentPage = currentPage;
            this.getTableData();
        },

        toDelete(row){
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/helpSupport/delete';
                p.helpId = row.helpId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        toPublish(row){
            this.$confirm('确定发布吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/helpSupport/publish';
                p.helpId = row.helpId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        toUnPublish(row){
            this.$confirm('确定取消发布吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/helpSupport/unPublish';
                p.helpId = row.helpId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        addHelp(){
            this.addForm.isCreate = true;
            this.addForm.question = '';
            this.addForm.answer = '';
            this.addForm.helpType = '';
            this.addForm.orderNum = '';
            this.$refs['addForm'].clearValidate();
            this.showPage = 2;
        },

        addBack(){
            this.showPage = 1;
        },

        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let p = {};
                    let url = '';
                    if(!this.addForm.isCreate){
                        p.helpId = this.addForm.helpId;
                        url = '/api/helpSupport/modify';
                    }else{
                        url = '/api/helpSupport/add';
                    }
                    p.question = this.addForm.question;
                    p.answer = this.addForm.answer;
                    p.helpType = this.addForm.helpType;
                    p.orderNum = this.addForm.orderNum;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.getTableData();
                        this.showPage = 1;
                    })
                }
            });
        },

        toModify(row){
            this.addForm.isCreate = false;
            this.addForm.helpId = row.helpId;
            this.addForm.question = row.question;
            this.addForm.answer = row.answer;
            this.addForm.helpType = row.helpType;
            this.addForm.orderNum = row.orderNum;
            this.$refs['addForm'].clearValidate();
            this.showPage = 3;
        },

        toPreview(row){
            this.preForm.helpId = row.helpId;
            this.preForm.question = row.question;
            this.preForm.answer = row.answer;
            this.preForm.helpType = row.helpType;
            this.preForm.orderNum = row.orderNum;
            this.preForm.helpState = row.helpState;
            this.showPage = 4;
        }
    },

    mounted(){
        this.getTableData();
    }
}
</script>
<style scoped>
.pre{
 white-space:pre-wrap;
 white-space:-moz-pre-wrap;
 white-space:-o-pre-wrap;
 word-wrap:break-word;
 width: 400px;
 }

</style>